<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="app"></div>
  <script src="../packages/reactivity/dist/reactivity.global.js"></script>
  <script>
    const { reactive, readonly, toRaw, markRaw, effect, ref} = VueReactivity
    // 1. 被readonly代理过的，在被reactive进行代理会直接返回readonly的结果；
    //    说明：所以被readonly代理过的就没有必要在使用reactive代理了。
    // let obj = { name: 'jw' }
    // let proxy1 = readonly(obj)
    // let proxy2 = reactive(proxy1)
    // console.log(proxy1 === proxy2)

    // 2. 已经被代理过的对象，再次被代理会直接返回上次代理的结果
    // 例子中不管是obj还是proxy1再次被代理都会返回proxy1
    // let obj = { name: 'jw' }
    // let proxy1 = reactive(obj)
    // let proxy2 = reactive(proxy1)
    // let proxy3 = reactive(obj)
    // console.log(proxy1 === proxy2)
    // console.log(proxy1 === proxy3)

    // 3. toRaw方法使用，返回响应式的原始对象
    let obj = {name: 'jw'}
    let proxy = reactive(obj)
    console.log(obj === toRaw(proxy))
    // markRaw 标记不可被代理
    let obj2 = {name: 'jw'}
    let proxy2 = reactive(markRaw(obj2))
    console.log(proxy2)
  </script>
</body>
</html>